import { FC, Fragment,useEffect,useState } from "react"
import { Outlet } from "react-router-dom"
import * as api from "@/api"
import { Table, Tree } from 'antd'
import type { DataNode, DirectoryTreeProps } from 'antd/es/tree'
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
interface DataType {
  productCode: number;// 编号
  productName: string;// 名称
  newPrice: number;// 现价
  oldPrice: number;// 原价
  city: string;// 城市
  joinDate: string;// 加入时间
  status: string;// 审核状态
  state: string;// 状态
  caozuo: any;// 操作
}
// type IDataNode = {
//   title?: string,
//   key?: any,
//   children?: Array<any>,
//   isLeaf?:boolean,
// }
let { DirectoryTree } = Tree
let treeData: DataNode[] = [
  {
    title: 'parent0',
    key: '0-0',
    children: [
      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
      { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
    ],  
  }
]
let columns: ColumnsType<DataType> = [
  {
    title: '产品编号',
    dataIndex: 'productCode',
  },
  {
    title: '产品名称',
    dataIndex: 'productName',
  },
  {
    title: '原价',
    dataIndex: 'oldPrice',
  },
  {
    title: '现价',
    dataIndex: 'newPrice',
  },
  {
    title: '所属地区/国家',
    dataIndex: 'city',
  },
  {
    title: '加入时间',
    dataIndex: 'joinDate',
  },
  {
    title: '审核状态',
    dataIndex: 'status',
  },
  {
    title: '状态',
    dataIndex: 'state',
  },
  {
    title: '操作',
    dataIndex: 'caozuo',
  },
];
const data: DataType[] = [];
// for (let i = 0; i < 46; i++) {
//   data.push({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   });
// }


let PCategoryManagement: FC = () => {
  // 树形部分
  let onSelect: DirectoryTreeProps['onSelect'] = (keys:any, info:any) => {
    console.log('Trigger Select',keys,info)
  }
  let onExpand: DirectoryTreeProps['onExpand'] = (keys: any, info: any) => {
    console.log('Trigger Expand',keys,info)
  }
  // 表格部分
    let [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    let onSelectChange = (newSelectedRowKeys: React.Key[]) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      setSelectedRowKeys(newSelectedRowKeys);
    };

    let rowSelection: TableRowSelection<DataType> = {
      selectedRowKeys,
      onChange: onSelectChange,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        Table.SELECTION_NONE,
        {
          key: 'odd',
          text: 'Select Odd Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            setSelectedRowKeys(newSelectedRowKeys);
          },
        },
        {
          key: 'even',
          text: 'Select Even Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            setSelectedRowKeys(newSelectedRowKeys);
          },
        },
      ],
    };
  return (
      <Fragment>
      {/* </DirectoryTree> */}
      <DirectoryTree
        multiple
        defaultExpandAll
        onSelect={onSelect}
        onExpand={onExpand}
        treeData={treeData}
      />
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
        {/* </Table> */}
      </Fragment>
    )
  }
  <Outlet />

export default PCategoryManagement